{% load static %}
<html>
<head>
    <title>资产管理系统（调试完成版）</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <style>
        /* 保留原有样式 */
        * {
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        body {
            background-color: #f8f9fa;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .container {
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
            overflow: hidden;
            padding: 20px;
        }
        h1 {
            text-align: center;
            margin-bottom: 20px;
            color: #2c3e50;
        }
        .table-container {
            max-width: 100%;
            overflow-x: auto;
            margin-bottom: 20px;
        }
        .asset-table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
        }
        .asset-table th {
            background-color: #2c3e50;
            color: white;
            padding: 15px;
            text-align: left;
            font-weight: 600;
            position: relative;
            cursor: pointer;
            user-select: none;
        }
        .asset-table th:hover {
            background-color: #34495e;
        }
        .asset-table th.sortable::after {
            content: '↑↓';
            position: absolute;
            right: 10px;
            opacity: 0.6;
            font-size: 14px;
        }
        .asset-table th.asc::after {
            content: '↑';
            color: #3498db;
        }
        .asset-table th.desc::after {
            content: '↓';
            color: #3498db;
        }
        .asset-table td {
            padding: 15px;
            border-bottom: 1px solid #eee;
            color: #333;
        }
        .asset-table tr:hover {
            background-color: #f8f9fa;
            transition: background-color 0.2s ease;
        }
        .pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }
        .pagination-controls {
            display: flex;
            align-items: center;
        }
        .pagination button {
            background-color: #fff;
            border: 1px solid #ddd;
            padding: 8px 12px;
            cursor: pointer;
            margin-right: 5px;
            border-radius: 4px;
        }
        .pagination button:hover:not(:disabled) {
            background-color: #f1f1f1;
        }
        .pagination button:disabled {
            color: #999;
            cursor: not-allowed;
        }
        .page-input {
            padding: 8px;
            width: 60px;
            margin: 0 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .loading {
            text-align: center;
            padding: 20px;
            font-style: italic;
            color: #666;
        }
        .error {
            padding: 15px;
            background-color: #f8d7da;
            color: #721c24;
            border-radius: 4px;
            margin-bottom: 20px;
            text-align: center;
        }
        .filter-section {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
            padding: 15px;
            background-color: #f5f7fa;
            border-radius: 6px;
        }
        .filter-item {
            display: flex;
            align-items: center;
        }
        .filter-item label {
            margin-right: 5px;
            font-weight: 500;
        }
        .filter-item select, .filter-item input {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .search-box {
            flex-grow: 1;
            display: flex;
        }
        .search-box input {
            width: 100%;
            padding: 8px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            outline: none;
        }
        .search-box button {
            background-color: #2c3e50;
            color: white;
            border: none;
            padding: 8px 15px;
            cursor: pointer;
            border-radius: 0 4px 4px 0;
        }
        .status-tag {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 12px;
            color: white;
        }
        .status-inuse {
            background-color: #28a745;
        }
        .status-available {
            background-color: #007bff;
        }
        .status-maintenance {
            background-color: #ffc107;
            color: #333;
        }
        .status-lost {
            background-color: #dc3545;
        }
        @media (max-width: 768px) {
            .filter-section {
                flex-direction: column;
            }
            .filter-item {
                width: 100%;
            }
            .asset-table {
                font-size: 14px;
            }
            .asset-table th,
            .asset-table td {
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>资产管理系统（调试完成版）</h1>

        <!-- 过滤和搜索区域 -->
        <div class="filter-section">
            <div class="filter-item">
                <label for="category">类别:</label>
                <select id="category">
                    <option value="">全部</option>
                    <option value="stationery">文具</option>
                    <option value="teaching">教学设备</option>
                    <option value="cleaning">清洁用品</option>
                    <option value="electronic">电子设备</option>
                    <option value="furniture">家具</option>
                </select>
            </div>

            <div class="filter-item">
                <label for="status">状态:</label>
                <select id="status">
                    <option value="">全部</option>
                    <option value="in_use">使用中</option>
                    <option value="available">可用</option>
                    <option value="maintenance">维护中</option>
                    <option value="lost">遗失</option>
                </select>
            </div>

            <div class="filter-item">
                <label for="search">搜索:</label>
                <div class="search-box">
                    <input type="text" id="search" placeholder="输入关键词搜索">
                    <button id="search-btn">搜索</button>
                </div>
            </div>

            <button id="reset-filter" style="margin-left: auto; padding: 8px 15px; background-color: #f8f9fa; border: 1px solid #ddd; cursor: pointer;">重置筛选</button>
        </div>

        <!-- 数据表格 -->
        <div class="table-container">
            <div id="statusMessage" class="error" style="display: none;"></div>
            <table id="assetTable" class="asset-table">
                <thead>
                    <tr>
                        <th class="sortable" data-field="id">ID</th>
                        <th class="sortable" data-field="name">资产名称</th>
                        <th class="sortable" data-field="category">类别</th>
                        <th class="sortable" data-field="location">位置</th>
                        <th class="sortable" data-field="price">价格</th>
                        <th class="sortable" data-field="purchase_date">购入日期</th>
                        <th class="sortable" data-field="quantity">数量</th>
                        <th class="sortable" data-field="status">状态</th>
                        <th class="sortable" data-field="unit">单位</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 动态数据将插入此处 -->
                    <tr>
                        <td colspan="9" style="text-align: center;">加载中...</td>
                    </tr>
                </tbody>
            </table>

            <div class="pagination">
                <div class="pagination-controls">
                    <button id="prev-btn">上一页</button>
                    <span>第 <input type="number" id="page-input" class="page-input" min="1" value="1"> 页，共 <span id="total-pages">1</span> 页</span>
                    <button id="next-btn">下一页</button>
                </div>
                <div class="page-jumper">
                    跳转到 <input type="number" id="goto-input" class="page-input" min="1" value="1"> 页
                    <button id="goto-btn">Go</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // ======== 全局变量声明 ========
            const $tableBody = $("#assetTable tbody");
            const $statusMessage = $("#statusMessage");
            const $prevBtn = $("#prev-btn");
            const $nextBtn = $("#next-btn");
            const $pageInput = $("#page-input");
            const $gotoBtn = $("#goto-btn");
            const $gotoInput = $("#goto-input");
            const $totalPages = $("#total-pages");
            const $categorySelect = $("#category");
            const $statusSelect = $("#status");
            const $searchInput = $("#search");
            const $resetFilterBtn = $("#reset-filter");
            const $searchBtn = $("#search-btn");

            // API基础URL（必须与后端实际接口一致）
            const baseUrl = "/assets/";  // 注意：你的后端接口是 /assets/ 还是 /asset/list/？需严格匹配

            // 分页参数
            let currentPage = 1;
            let totalPages = 1;
            let pageSize = 3;  // 与后端 PageNumberPagination 的 page_size 一致

            // 排序参数
            let sortField = "-id";  // 默认按ID降序排列
            let sortOrder = "desc";

            // 过滤参数
            let filterParams = {
                category: "",
                status: "",
                search: ""
            };

            // 上一页URL（用于分页状态判断）
            let prevPageUrl = '';
            // 下一页URL（用于分页状态判断）
            let nextPageUrl = '';

            // ======== 工具函数 ========
            // 显示状态消息
            function showStatus(message, isError = false) {
                $statusMessage.text(message)
                    .removeClass('error')
                    .toggleClass('error', isError)
                    .fadeIn(200)
                    .delay(3000)
                    .fadeOut(200);
            }

            // 显示加载动画
            function showLoading() {
                $tableBody.html('<tr><td colspan="9" style="text-align: center;">数据加载中...</td></tr>');
            }

            // 隐藏加载动画
            function hideLoading() {
                $tableBody.empty();
            }

            // 构建API URL（打印完整请求信息）
            function buildApiUrl() {
                let url = `${baseUrl}?page=${currentPage}&page_size=${pageSize}&ordering=${sortField}`;

                if (filterParams.category) {
                    url += `&category=${filterParams.category}`;
                    console.log('[前端日志] 添加类别过滤:', filterParams.category);
                }

                if (filterParams.status) {
                    url += `&status=${filterParams.status}`;
                    console.log('[前端日志] 添加状态过滤:', filterParams.status);
                }

                if (filterParams.search) {
                    url += `&search=${encodeURIComponent(filterParams.search)}`;
                    console.log('[前端日志] 添加搜索关键词:', filterParams.search);
                }

                console.log('[前端日志] 构建的请求URL:', url);  // 打印完整请求URL
                return url;
            }

            // 从URL中解析当前页码
            function getCurrentPageFromUrl(url) {
                const params = new URLSearchParams(url.split('?')[1] || '');
                return parseInt(params.get('page')) || 1;
            }

            // ======== 核心请求函数 ========
            // 获取资产数据（核心修改）
            function fetchAssetData() {
                showLoading();

                // 打印请求前的关键参数
                console.log('\n===== 开始请求资产数据 =====');
                console.log('[前端日志] 当前页码:', currentPage);
                console.log('[前端日志] 每页数量:', pageSize);
                console.log('[前端日志] 排序字段:', sortField);
                console.log('[前端日志] 排序方向:', sortOrder);
                console.log('[前端日志] 过滤参数:', {...filterParams});

                // 发送请求
                $.ajax({
                    url: buildApiUrl(),
                    method: "GET",
                    dataType: "json",
                    success: function(response) {
                        console.log('\n===== 响应数据 =====');
                        console.log('[前端日志] 后端返回结构:', response);  // 打印完整响应验证结构

                        // 后端返回的字段：count（总数据量）、next（下一页URL）、previous（上一页URL）、results（当前页数据）
                        const totalData = response.count || 0;  // 总数据量（关键）
                        nextPageUrl = response.next || '';  // 下一页URL
                        prevPageUrl = response.previous || '';  // 上一页URL
                        const currentResults = response.results || [];  // 当前页数据（关键）

                        // 更新分页参数
                        currentPage = getCurrentPageFromUrl(response.next || response.previous || baseUrl);
                        totalPages = Math.ceil(totalData / pageSize);  // 总页数 = 总数据量 / 每页数量

                        // 渲染表格数据
                        renderTable(currentResults);

                        // 更新分页控件状态
                        updatePagination();

                        // 更新URL参数（用于刷新/分享）
                        updateUrlParams();
                    },
                    error: function(xhr, statusText, errorThrown) {
                        // 错误处理（保持不变）
                        console.error('\n===== 请求失败 =====');
                        console.error('[前端日志] HTTP状态码:', xhr.status);
                        console.error('[前端日志] 错误信息:', xhr.statusText);
                        console.error('[前端日志] 响应内容:', xhr.responseText);
                        showStatus(`网络请求失败：${xhr.statusText}（状态码：${xhr.status}）`, true);
                    }
                });
            }

            // 渲染表格数据
            function renderTable(data) {
                $tableBody.empty();

                if (!data || data.length === 0) {
                    $tableBody.html('<tr><td colspan="9" style="text-align: center;">暂无资产数据</td></tr>');
                    console.log('[前端日志] 无资产数据');
                    return;
                }

                data.forEach(asset => {
                    // 格式化价格（处理字符串或数字类型）
                    const price = typeof asset.price === 'string' ?
                        parseFloat(parseFloat(asset.price).toFixed(2)) :  // 处理字符串类型的price（如"4.50"）
                        parseFloat(asset.price.toFixed(2));  // 处理数字类型的price（如4.50）

                    // 创建状态标签
                    let statusTag = '';
                    switch (asset.status) {
                        case 'in_use':
                            statusTag = `<span class="status-tag status-inuse">使用中</span>`;
                            break;
                        case 'available':
                            statusTag = `<span class="status-tag status-available">可用</span>`;
                            break;
                        case 'maintenance':
                            statusTag = `<span class="status-tag status-maintenance">维护中</span>`;
                            break;
                        case 'lost':
                            statusTag = `<span class="status-tag status-lost">遗失</span>`;
                            break;
                        default:
                            statusTag = `<span class="status-tag">${asset.status}</span>`;
                    }

                    const row = `
                        <tr>
                            <td>${asset.id}</td>
                            <td>${asset.name}</td>
                            <td>${getCategoryName(asset.category)}</td>
                            <td>${asset.location}</td>
                            <td>¥${price}</td>
                            <td>${asset.purchase_date}</td>
                            <td>${asset.quantity}</td>
                            <td>${statusTag}</td>
                            <td>${asset.unit}</td>
                        </tr>
                    `;
                    $tableBody.append(row);
                });
            }

            // 获取类别的中文名称
            function getCategoryName(categoryCode) {
                const categories = {
                    'stationery': '文具',
                    'teaching': '教学设备',
                    'cleaning': '清洁用品',
                    'electronic': '电子设备',
                    'furniture': '家具'
                };
                return categories[categoryCode] || categoryCode;
            }

            // 更新分页控件状态
            function updatePagination() {
                $prevBtn.prop('disabled', !prevPageUrl || currentPage <= 1);  // 上一页禁用条件：无上一页URL 或 当前页=1
                $nextBtn.prop('disabled', !nextPageUrl || currentPage >= totalPages);  // 下一页禁用条件：无下一页URL 或 当前页=总页数
                $pageInput.val(currentPage);
                $totalPages.text(totalPages);
                $gotoInput.val(currentPage);
                console.log(`[前端日志] 更新分页控件：当前页=${currentPage}，总页数=${totalPages}`);
            }

            // 更新URL参数（用于刷新/分享）
            function updateUrlParams() {
                const params = new URLSearchParams(window.location.search);
                params.set('page', currentPage);
                params.set('page_size', pageSize);

                if (filterParams.category) {
                    params.set('category', filterParams.category);
                } else {
                    params.delete('category');
                }

                if (filterParams.status) {
                    params.set('status', filterParams.status);
                } else {
                    params.delete('status');
                }

                if (filterParams.search) {
                    params.set('search', filterParams.search);
                } else {
                    params.delete('search');
                }

                const newUrl = window.location.pathname + '?' + params.toString();
                window.history.pushState({ path: newUrl }, '', newUrl);
                console.log(`[前端日志] 更新URL参数：${newUrl}`);
            }

            // ======== 事件监听 ========
            // 初始化加载数据
            fetchAssetData();

            // 上一页按钮点击事件
            $prevBtn.click(function() {
                if (currentPage > 1) {
                    currentPage--;
                    console.log(`[前端日志] 点击上一页，跳转到第${currentPage}页`);
                    fetchAssetData();
                }
            });

            // 下一页按钮点击事件
            $nextBtn.click(function() {
                if (currentPage < totalPages) {
                    currentPage++;
                    console.log(`[前端日志] 点击下一页，跳转到第${currentPage}页`);
                    fetchAssetData();
                }
            });

            // 页码输入框回车事件
            $pageInput.keypress(function(e) {
                if (e.which === 13) { // Enter键
                    const pageNum = parseInt($(this).val());
                    if (pageNum >= 1 && pageNum <= totalPages) {
                        currentPage = pageNum;
                        console.log(`[前端日志] 输入页码${pageNum}，跳转到该页`);
                        fetchAssetData();
                    } else {
                        showStatus(`请输入1到${totalPages}之间的页码`, true);
                        $(this).val(currentPage);
                    }
                }
            });

            // 跳转到按钮点击事件
            $gotoBtn.click(function() {
                const pageNum = parseInt($gotoInput.val());
                if (pageNum >= 1 && pageNum <= totalPages) {
                    currentPage = pageNum;
                    console.log(`[前端日志] 输入跳转页码${pageNum}，跳转到该页`);
                    fetchAssetData();
                } else {
                    showStatus(`请输入1到${totalPages}之间的页码`, true);
                    $gotoInput.val(currentPage);
                }
            });

            // 监听类别选择变化
            $categorySelect.change(function() {
                filterParams.category = $(this).val();
                currentPage = 1;  // 重置到第一页
                console.log(`[前端日志] 选择类别：${filterParams.category || '全部'}，重置到第1页`);
                fetchAssetData();
            });

            // 监听状态选择变化
            $statusSelect.change(function() {
                filterParams.status = $(this).val();
                currentPage = 1;  // 重置到第一页
                console.log(`[前端日志] 选择状态：${filterParams.status || '全部'}，重置到第1页`);
                fetchAssetData();
            });

            // 监听搜索按钮点击
            $searchBtn.click(function() {
                filterParams.search = $searchInput.val().trim();
                currentPage = 1;  // 重置到第一页
                console.log(`[前端日志] 搜索关键词：${filterParams.search || '无'}，重置到第1页`);
                fetchAssetData();
            });

            // 监听搜索框回车事件
            $searchInput.keypress(function(e) {
                if (e.which === 13) { // Enter键
                    $searchBtn.click();
                }
            });

            // 重置筛选按钮点击事件
            $resetFilterBtn.click(function() {
                filterParams = {
                    category: "",
                    status: "",
                    search: ""
                };

                $categorySelect.val("");
                $statusSelect.val("");
                $searchInput.val("");

                currentPage = 1;  // 重置到第一页
                console.log('[前端日志] 重置所有筛选条件，重置到第1页');
                fetchAssetData();
            });

            // 监听排序表头点击
            $tableBody.on('click', '.sortable', function() {
                const field = $(this).data('field');

                // 如果点击的是当前排序字段，则切换排序方向
                if (sortField === field || sortField === `-${field}`) {
                    sortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
                } else {
                    sortField = field;
                    sortOrder = 'asc';
                }

                // 更新排序指示器
                $('.sortable').removeClass('asc desc');
                $(this).addClass(sortOrder);

                // 重新获取数据
                currentPage = 1;  // 重置到第一页
                console.log(`[前端日志] 排序字段：${sortField}，排序方向：${sortOrder}，重置到第1页`);
                fetchAssetData();
            });

            // 监听窗口大小变化
            $(window).on('resize', function() {
                // 可以添加响应式布局调整代码
            }).trigger('resize');
        });
    </script>
</body>
</html>